<!-- 头部 -->
<template>
  <div class="top-right">
    <div class="flex top-right-father">
      <div class=" top-right-top " >
        <h2 class="policeTitle u-m-b-10"><span>今日报警概况</span></h2>
        <div class="top-right-li">
          <div class="top-right-li-item flex align-center" v-for="(iv,is) in dataList" :key="is">
            <img src="@/assets/img/icon1.png" class="img" v-if="is==0||is==2">
            <img src="@/assets/img/icon2.png" class="img2" v-if="is==1||is==3">
            <div class="right u-m-l-16">
              <!-- <p v-if="is==0">已处理</p>
              <p v-if="is==1">未处理</p>
              <p v-if="is==2">报警处理率</p>
              <p v-if="is==3">报警总数</p> -->
              <p>{{iv.name}}</p>
              <h2 class="u-m-t-10">{{iv.value}}</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="top-right-bottom flex-1 ">
        <slot name="bottom"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftTopBox",
  props:{
    dataVal:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data() {
    return {
      dataList:[]
    };
  },
  watch:{
    dataVal:{
      handler:function(val){
        if(val){
          console.log(val,'======val')
          this.getData(val)
        }
      },
      deep:true,
      immediate:true
    }
  },

  mounted() {
    // this.getData();
  },
  methods: {
    async getData(data){
      this.dataList=[{
            name:'已处理',
            value:data.resort_handle_count
          },{
            name:'未处理',
            value:data.resort_untreated_count
          },{
            name:'报警处理率',
            value:data.resort_handle_rate
          },{
            name:'报警总数',
            value:data.resort_count
          }]
      // let { data } = await this.$http.get('/police_center/getTodayResortOverview')
      // try{
      //   if ( data.code === 0 ) {
      //     // this.getData(data.data)
      //     this.dataList=[{
      //       name:'已处理',
      //       value:data.data.resort_handle_count
      //     },{
      //       name:'未处理',
      //       value:data.data.resort_untreated_count
      //     },{
      //       name:'报警处理率',
      //       value:data.data.resort_handle_rate
      //     },{
      //       name:'报警总数',
      //       value:data.data.resort_count
      //     }]
      //   }
      // } catch {
      //   console.log('error')
      // }
    }
  },
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.top-right {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  &-father{
    flex-direction: column;
    height: 100%;
  }
  &-top{

  }
  &-bottom{
    overflow: hidden;
  }
  .top-right-li{
    margin: 20px 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px; 
    &-item{
      width:100%;
      color: #fff;
      p{
        font-size: 16px;
      }
      h2{
        font-size: 28px;
        font-weight: bold;
        color: #fff;
      }
      .img{
        width: 80px;
        height: 80px;
      }
      .img2{
        width: 66px;
        height: 66px;
      }
    }
  }
}
</style>
